<template>
  <div class="map">
    <Top></Top>
    <div class="out" style="display: flex">
      <div class="left">
        <HotCity></HotCity>
        <Ciyun></Ciyun>
      </div>
      <div class="center">
        <ChinaMap></ChinaMap>
        <Line></Line>
      </div>
      <div class="right">
        <Attraction></Attraction>
        <Couter></Couter>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {restraveldata} from '@/api/travel/type'
import {gettraveldata} from '../../api/travel/index' ;
import Top from './top/index.vue'
import HotCity from './hotcity/index.vue'
import Ciyun from './ciyun/index.vue'
import ChinaMap from './chinamap/index.vue'
import Line from './line/index.vue'
import Attraction from './attraction/index.vue'
import Couter from './couter/index.vue'
import { onMounted } from 'vue';
import { usetravelStore } from '../../stores/travel'
let travelStore = usetravelStore()
const initdata=async ()=>{
  let result:restraveldata=await gettraveldata()
  if(result.status==0){
    travelStore.modifytraveldata(result.data)

  }
}
onMounted(()=>{
  initdata()
})
</script>
<style scoped>
* {
  color: white;
  background-color: black;
}
.map {
  width: 100%;
  height: 100vh;
  .left {
    width: 25%;
    height: 100%;
  }
  .center {
    width: 40%;
    height: 100%;
    margin-left: 30px;
    /* background-color: aliceblue; */
  }
  .right {
    width: 30%;
    height: 100%;
    margin-left: 30px;
  }
}
</style>
